<template>
    <div class="main-page">
        <el-form :model="formData" label-position="labelPosition" ref="formData"
                 size="mini">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="教师名称">
                        <el-input suffix-icon="el-icon-search" @change="initData" class="search-input" label="教师名称" v-model="formData.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
                <el-button type="info" @click="this.addEmpPanel" size="mini" icon="el-icon-search">添加老师</el-button>
            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="3%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="老师姓名"
                    min-width="10%">
                    <template slot-scope="scope">
                        <div>
                            <el-row>
                                <el-button size="mini" type="primary" circle>李</el-button>
                                <span class="enamecls">{{scope.row.ename }}</span></el-row>
                            <el-row>
                                <el-tag v-for="(rule ,index) in scope.row.rules  " :key="index" size="mini"
                                        type="primary">{{rule.id}}
                                </el-tag>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                    property="mobile"
                    label="手机号码"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="createtime"
                    label="创建时间"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.createtime | dateFmt }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="updatetime"
                    label="更新时间"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.updatetime | dateFmt}}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="emptype"
                    label="员工类型"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.emptype | commentFmt(gempTypeMap)}}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button-group>
                            <el-button @click="modEmpPanel(scope.$index,scope.row)" class="col-btn" size="mini" type="primary"
                                       icon="el-icon-edit"></el-button>
                            <el-button @click="deleteEmpOper(scope.$index,scope.row)" class="col-btn" size="mini" type="primary"
                                       icon="el-icon-delete"></el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
            <el-dialog
                title="提示"
                :visible.sync="addEmpDialogVisible"
            >
                <addStaff ref="addStaffPanel"></addStaff>
                <template slot="footer">
                    <el-row type="flex" justify="end">
                        <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                        <el-button @click="addStaffOper" type="primary" plain size="mini">确认</el-button>
                    </el-row>
                </template>


            </el-dialog>
        </div>

    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {employeeListApi, empDetailApi, modifyEmpApi,deleteEmpApi,addEmpApi} from '@/api/getData'
    import addStaff from '@/page/components/addStaff'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {
                type:null,
                ismod: false,
                addEmpDialogVisible: false,
                addOneTooneDialogVisible: false,
                loading: false,
                pager: {pageNo: 1, pageSize: 5},
                classrange: '',
                empsList: [],
                formData: {name: '', limit: 10},
                tableData: [],
                count: 0,
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addStaff,

        },
        computed: {
            ...mapGetters(['adminInfo', 'gempTypeList', 'gempTypeMap','gsubjectList']),

        },
        created() {
        },
        mounted() {
            this.initData();
        },
        methods: {
            ...mapActions(['getPeriod']),
            addEmpPanel() {
                this.ismod = false;
                this.addEmpDialogVisible = true;
            },

            closeadd: function () {
                this.addEmpDialogVisible = false;
                this.addForm = {};

            },
            async modEmpPanel(index,row) {
                this.ismod = true;
                this.addEmpDialogVisible = true;
                const res = await empDetailApi({data: {id: row.id}});
                if (res.success == true) {
                    this.$refs.addStaffPanel.childForm = res.data;
                    var rulearray=toruleArray(res.data.rules);
                    this.$refs.addStffPanel.checkRules=rulearray;
                } else {

                }


            },
            tableRowClassName({row, rowIndex}) {

            },
            handleCurrentChange(val) {
                this.pager.pageNo = val;
                this.initData(this.pager)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },

            async initData(pager) {
                if(pager==null) this.pager={pageNo: 1, pageSize: 5};
                this.type = this.$route.params.type;
                this.tableData=[];
                this.formData.pager = this.pager;
                this.formData.emptype=this.type;
                const res = await employeeListApi({"data": this.formData});
                var list = res.data;
                if (res.success == true) {
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.name = item.name;
                        tableData.mobile = item.mobile;
                        tableData.emptype = 1;
                        tableData.createtime = item.createtime;
                        tableData.updatetime = item.createtime;
                        tableData.sex = item.sex;
                        this.tableData.push(tableData);


                    });
                }

            },
            deleteEmpOper(index, row) {
                this.$confirm('确认删除？')
                    .then(_ => {
                        this.deleteconfirm(row.id);
                    })
                    .catch(_ => {
                    });

            },
            async deleteconfirm(id) {
                const res = await
                    deleteEmpApi({data: {"id":id}});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '删除成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )

                }
            },
            torulearray(rulelist){
            var  rulearray=[];
            if(rulelist==undefined||rules==null||rulelist.size<0)
            return rulearray;
            rulelist.filter(r=>{
                rulearray.push(r.id);
            })
                return rulearray;
            },

            toruleslist(rules){
            var ruleslist=[];
            if(rules==undefined||rules==null||rules.size<0)
            return;
            rules.forEach(r=> {
                const t={};
                t.id=r;
                ruleslist.push(t);
            })
            return ruleslist;
            },
            async addStaffOper() {
                var valid = this.$refs.addStaffPanel.validForm();
                let opertype = this.$refs.addStaffPanel.opertype;
                this.addForm = this.$refs.addStaffPanel.childForm;

                this.rules=this.$refs.addStaffPanel.checkRules;
                if(this.rules!=null&&this.rules.length>0)
                var ruleslist=this.toruleslist(this.rules);
                this.addForm.rules=ruleslist;
                this.addForm.emptype=this.type;
                if (!valid) return;
                var res = '';
                if (!this.ismod)
                    res = await addEmpApi({data:this.addForm});
                else
                    res = await modifyEmpApi({data:this.addForm});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '添加成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )

                }

            },

        },
    }
</script>
<style lang="less">
    @import '../style/mixin';


</style>

